<template>
  <div class="sound-set">
    <div class="sound-group sound-volume">
      <div class="group-title">
        <p class="title-text">{{ $t('cmlpanel.volumeAdjust') }}</p>
        <button
          class="cml-base-button title-default"
          @click.stop="defaultVolume"
        >
          {{ $t('cmlpanel.default') + $t('cmlpanel.volume') }}
        </button>
        <!-- <button class="cml-base-button title-try">
          {{ $t('cmlpanel.audition') }}
        </button> -->
      </div>
      <div class="group-ctrl">
        <div class="slider-box">
          <a-slider
            :min="0"
            :max="100"
            @afterChange="change"
            v-model="volume"
          ></a-slider>
        </div>
        <div class="slider-mark">
          <span>0</span>
          <span>20</span>
          <span>40</span>
          <span>60</span>
          <span>80</span>
          <span>100</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Slider } from 'ant-design-vue'
export default {
  name: '',
  data() {
    return {
      volume: 100,
      defaultVol: 100
    }
  },
  created() {
    this.volume = app.soundServer.getVolume() * 100
  },
  methods: {
    change(val) {
      app.soundServer.changeVolume((val / 100).toFixed(2) - 0)
    },
    defaultVolume() {
      this.volume = this.defaultVol
      app.soundServer.changeVolume(1)
    }
  },
  components: {
    ASlider: Slider
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/panel-var.scss';
@import '../../style/panel-mixin.scss';

.sound-set {
  padding: 20px;
  box-sizing: border-box;

  font-size: $fz-ssm;
  button {
    font-size: $fz-ssm;
  }
  .sound-group {
    margin-bottom: 10px;
    .group-title {
      margin-bottom: 10px;

      @include flex(row, space-between);

      .title-text {
        margin-right: auto;
      }
    }
    .group-ctrl {
      height: 70px;
      .slider-box {
        height: 42px;
        padding-top: 6px;

        background-image: linear-gradient(90deg, #cafff733 1px, transparent 0),
          linear-gradient(90deg, #cafff733 1px, transparent 0);
        background-repeat: repeat-x;
        background-position-x: 6px;
        background-position-y: 0, 12px;
        background-size: 19% 42px, 3.8% 10px;
      }
      .slider-mark {
        @include flex(row, space-between);
        color: #cafff733;
        span {
          display: inline-block;

          width: 16px;

          text-align: center;
        }
      }
      .slider-box-rate {
        height: 42px;
        padding-top: 6px;

        background-image: linear-gradient(90deg, #cafff733 1px, transparent 0),
          linear-gradient(90deg, #cafff733 1px, transparent 0);
        background-repeat: repeat-x;
        background-position-x: 6px;
        background-position-y: 22px, 22px;
        background-size: 19% 16px, 3.8% 8px;
      }
      .slider-mark-rate {
        span {
          width: auto;
        }
      }
    }
  }
}
</style>
